﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Comments Test Home Page</title>
    <link href="/Content/Demo.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="/Scripts/demo1/get.js"></script>
</head>
<body>
    <nav>
        <div class="demo-navigation">
            <a href="default.htm">&lt;&lt;&lt; Back</a> 
            | Demo 1 Simple Get |
            <a href="demo2-crud.htm">On to Demo 2 - Simple CRUD &gt;&gt;&gt;</a>
        </div>
    </nav>
    <div id="content">
        
        <div id="demo-actions">
            <div>
                <legend>Get Comments Demos</legend>
                <button id="getComments">Go!</button>
            </div>
        </div>
        <div id="article">
            <p>
                This first demo shows a very simple GET scenario. Click on the button to 
                use jQuery to retrieve JSON data from a Web API endpoint and then display 
                the contents of that payload in the UI.
            </p>
            <p>
                The code represents retrieving data in a manner that any developer familiar 
                with jQuery would understand.
            </p>
        </div>

        <ul data-bind="template: {name: 'commentTemplate', foreach: comments}">
        </ul>

        <script id="commentTemplate" type="text/html">
            <li class="comment">
                <header>
                    <div class="info">
                        <img data-bind="attr: {src: GravatarUrl}" />
                        <strong><span data-bind="text: Author"></span></strong>
                    </div>
                </header>
                <div class="body">
                    <p data-bind="text: Text"></p>
            
                </div>
            </li>
        </script>

        <script type="text/javascript">
            viewModel = {
                comments: ko.observableArray([])
            };

            ko.applyBindings(viewModel);
        </script>
    </div>
</body>
</html>